<template>
  <div class="stick-particle1">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import * as THREE from 'three';
import logo from '../assets/logo.png';
const logoSrc = import.meta.globEager('../assets/*.png');
import stick from '../libs/stick.json';
const scene =  new THREE.Scene();
const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 40);
scene.add(camera);
const point  = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);
const ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true,
});
renderer.debug.checkShaderErrors = false;
renderer.setClearColor(new THREE.Color(), 0);
renderer.setPixelRatio(750 / window.innerWidth);


@Options({ components: {} })
export default class StickParticle1 extends Vue {
  public rect: DOMRect|null = null;

  public mounted() {
    this.rect = (this.$el as HTMLElement).getBoundingClientRect();
    renderer.setSize(this.rect.width, this.rect.height, false);
    (this.$refs.canvas as HTMLDivElement).append(renderer.domElement);
    const texture = new THREE.TextureLoader().load(logoSrc['../assets/snow1.png'].default);

    const typeNum = 2;
    const range = 50;
    const materials = [];
    for (let i = 0; i < typeNum; i++) {
      const material = new THREE.PointsMaterial({
        size: 2,
        map: texture,
        opacity: 1,
        depthTest: false,
      });
      material.map!.offset = new THREE.Vector2(1 / typeNum * i, 0);
      material.map!.repeat = new THREE.Vector2(1 / typeNum, 1);
      materials.push(material);
    }
    const geoms = [];
    for (let k = 0; k < typeNum; k++) {
      const geom = new THREE.PlaneGeometry();
      for (let i = 0; i < 100; i++) {
        // 随机生成雪花的位置
        const v = new THREE.Vector3(
          Math.random() * range - range / 2,
          Math.random() * range - range / 2,
          Math.random() * range - range / 2,
        );
        // 随机生成雪花分别沿x、y、z轴方向移动速度
        v.x = 0.1 + Math.random() / 5;
        v.y = (Math.random() - 0.5) / 3;
        v.z = (Math.random() - 0.5) / 3;
        // 添加顶点
        geom.vertices.push(v);
      }
      geoms.push(geom);
    }

    renderer.setAnimationLoop(() => {
      renderer.render(scene, camera);
    });
  }
}
</script>

<style lang="postcss" scoped>
  .stick-particle1{
    touch-action: none;
    position: absolute;
    left: 0;top: 0;
    width: 100%;height: 100%;
    background: #1c1c1c;
 .canvas{
      position: absolute;
      left: 0;top: 0;
      width: 100%;height: 100%;
       :deep(canvas){
        width: 100%;height: 100%;
      }
    }
  }
</style>
